<div class="video-banner">

  <div class="header-text">
    <div class="page-width">
      {%- if section.settings.title != blank -%}
        <div class="html">{{ section.settings.title }}</div>
      {%- else -%}
      <div class="html icon">
        {% render 'icon-cgo600pro' %}
      </div>
      {%- endif -%} 
      {%- if section.settings.text != blank -%}
        <div class="text">{{ section.settings.text }}</div>
      {%- endif -%}
    </div>
  </div>

  <div class="video-auto">
    <div class="video-overlays"></div>
    <video loading="eager" class="video lazy" x5-video-player-type="h5" loop autoplay muted playsinline poster="https://cdn.shopify.com/s/files/1/0563/3926/7733/files/cgo-600-pro-poster.jpg?v=1685328992">
      <source x5-video-player-type="h5" data-src="https://cdn.shopify.com/videos/c/o/v/d5fe0469e7bf4384b859878741f45b66.mp4" type="video/webm">
      <source x5-video-player-type="h5" data-src="https://cdn.shopify.com/videos/c/o/v/d5fe0469e7bf4384b859878741f45b66.mp4" type="video/mp4">
    </video>
  </div>
  <div class="buttom-serve">
    <div class="">
      <div class="swiper mySwiper_server page-width">
      <div class="swiper-wrapper">
        {%- for block in section.blocks -%}
          <div class="swiper-slide" data-swiper-parallax="-600">
            <div class="multicolumn-card__info">
              {%- if block.settings.html != blank -%}
                <div class="html">{{ block.settings.html }}</div>
              {%- endif -%}
              {%- if block.settings.text != blank -%}
              <div class="text"> {{ block.settings.text }}</div>
              {%- endif -%}
            </div>
          </div>
        {%- endfor -%}
      </div>
    </div>
    </div>
  </div>
</div>


<script>
  var swiper = new Swiper(".mySwiper_server", {
    observer:true, 
    observeParents:true,
    autoplay: {
          delay: 5000,
          disableOnInteraction: false,
    },
    speed: 600,
    breakpoints: {
      375: {
        slidesPerView: 1.5,
        loop:true,
        centeredSlides: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
      },
      768: {
        slidesPerView: 2,
        spaceBetween: 36,
        centeredSlides: true,
        loop:true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
      },
      990: {
        slidesPerView: 3,
        loop:true,
        centeredSlides: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
      },
      991: {
        slidesPerView: 4,
        observer:true, 
        observeParents:true,
        autoplay:false,
      }
    }
  });
</script>



{% schema %}
  {
    "name": "Video banner",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width video-image",
    "settings": [
      {
        "type": "richtext",
        "id": "title",
        "label": "title"
      }, {
        "type": "text",
        "id": "text",
        "label": "Column"
      }
    ],
    "blocks": [
      {
        "type": "column",
        "name": "t:sections.multicolumn.blocks.column.name",
        "settings": [
          {
            "type": "html",
            "id": "html",
            "label": "html"
          }, 
          {
            "type": "text",
            "id": "text",
            "label": "Column"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Video banner",
        "blocks": [
          {
            "type": "column"
          }, {
            "type": "column"
          }, {
            "type": "column"
          }, {
            "type": "column"
          }
        ]
      }
    ]
  }
{% endschema %}













